$skin_color: #e4c560;
$tap-speed: 0.6s;
$tap-stagger: 0.1s;
.hand {
  position: relative;
  // margin: 10px auto;
  width: 80px;
  height: 60px;
  margin-left: 800px;
  user-select: none;
  &::before {
    content: "";
    width: 180px;
    height: 75px;
    position: absolute;
    top: 70%;
    right: 20%;
    background-color: black;
    border-radius: 40px 10px;
    filter: blur(10px);
    opacity: 0.3;
  }
  .thumb {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    background-color: $skin_color;
    border-radius: 10px 40px;
    &::before,
    &::after {
      content: "";
      position: absolute;
    }
    &::before {
      width: 120%;
      height: 38px;
      background-color: inherit;
      bottom: -18%;
      right: 1%;
      transform-origin: calc(100% - 20px) 20px;
      transform: rotate(-20deg);
      border-radius: 30px 20px 20px 10px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
      border-left: 2px solid rgba(0, 0, 0, 0.1);
    }
    &::after {
      width: 21%;
      height: 49%;
      background-color: rgba(255, 255, 255, 0.3);
      bottom: -52%;
      left: -10%;
      border-radius: 60% 10% 22% 30%;
      border-right: 2px solid rgba(0, 0, 0, 0.05);
      transform: rotate(-12deg);
    }
  }
  .finger {
    position: absolute;
    width: 80%;
    height: 35px;
    background-color: $skin_color;
    bottom: 32%;
    right: 64%;
    transform-origin: 100% 20px;
    transform: rotate(10deg);
    animation-duration: calc($tap-speed * 2);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    &::before {
      content: "";
      position: absolute;
      width: 140%;
      height: 30px;
      bottom: 8%;
      right: 65%;
      background-color: $skin_color;
      border-radius: 20px;
      transform-origin: calc(100% - 20px) 20px;
      transform: rotate(-60deg);
    }
    @for $i from 1 through 4 {
      &:nth-child(#{$i}) {
        animation-delay: calc($tap-stagger * ($i - 1));
        filter: brightness(calc(($i * 10 + 60) / 100));
        animation-name: tap-upper-#{$i};
      }
      @at-root {
        @keyframes tap-upper-#{$i} {
          0%,
          50%,
          100% {
            transform: rotate(10deg) scale(calc(0.2 + ($i * 0.2)));
          }
          40% {
            transform: rotate(50deg) scale(calc(0.2 + ($i * 0.2)));
          }
        }
      }
    }
  }
}
